<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>
        岗位添加编辑页面
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/assets/admin/css/font.css}">
    <link rel="stylesheet" th:href="@{/assets/admin/css/xadmin.css}">
    <script th:src="@{/assets/admin/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/assets/admin/js/xadmin.js}"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">

                    <form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
                        <input type="hidden" name="id" th:value="${item == null?'':item.id}"/>
                       <!-- <div class="layui-form-item">
                            <label class="layui-form-label"><span style="color:red;">*</span>拉线</label>
                            <div class="layui-input-inline">
                                <input type="text" th:disabled="${item !=null}" th:value="${item == null?'':item.productionLine}"
                                       name="productionLine" required lay-verify="required"
                                       placeholder="请输入拉线" autocomplete="off" class="layui-input" id="productionLine">
                            </div>
                        </div>-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">工序代码</label>
                            <div class="layui-input-inline">
                                <input type="text" disabled th:value="${item == null?'':item.procedureNumber}" name="procedureNumber"
                                      placeholder="请输入工序代码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span style="color:red;">*</span>工序名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="procedureName" th:disabled="${item != null}"
                                       th:value="${item == null?'':item.procedureName}"
                                       lay-verify="required" placeholder="请输入工序名称"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span style="color:red;">*</span>人员岗位技能</label>
                            <div class="layui-input-inline">
                                <div class="fairy-tag-container">
                                    <input id="input-tag" type="text" class="fairy-tag-input tag1" autocomplete="off" value="">
                                </div>
                                <input id="skills" name="skills" th:value="${item == null?'': item.skills }" type="hidden"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span style="color:red;">*</span>岗位类型</label>
                            <div class="layui-input-inline">
                                <select class="" name="postType" lay-verify="required">
                                    <option vlaue=""></option>
                                    <option value="1" th:selected="${item != null && item.postType eq 1}">普通岗位</option>
                                    <option value="2" th:selected="${item != null && item.postType eq 2}">关键岗位</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-inline">
                                <textarea th:text="${item == null ?'' : item.remarks}"
                                          placeholder="请输入内容" class="layui-textarea"
                                          name="remarks" id="remarks"></textarea>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-normal" type="button" lay-submit lay-filter="add" th:if="${item == null}">新增</button>
                                <button class="layui-btn layui-btn-warm" type="button" lay-submit lay-filter="update" th:if="${item != null}">更新</button>
                                <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:replace="systemCommon/HarinCommon :: commonJs"></script>
<script th:src="@{/assets/admin/js/jquery.min.js}"></script>
<script>
   $(function(){
       layui.config({
           base: '/assets/admin/lib/layui/mods/'
       }).extend({
           inputTag : "inputTag"
       });

       layui.use(['form','inputTag'], function () {
           form = layui.form;

           inputTag = layui.inputTag;

           skills = inputTag.render({
               elem: `#input-tag`,
               data:  strJson2Array($("#skills").val()),
               onChange: function (data, value, type) {
                   // newObj.resultArray = data;
                   // $(`#tag-result-${newObj.id}`).text(data.join(''));
                   // $(`${newObj.exportElem}`).val(data.join(''));
                   // $(`${newObj.exportDataToStrElem}`).val(data.join(','));
               }

           });

            //校验
           form.verify({
               // password : function(value,item){ //value：表单的值、item：表单的DOM对象
               //     if(isEmpty(value)){
               //         return "密码不能为空";
               //     }
               //     let flag = passwordValidate(value);
               //     if(!flag){
               //         return "密码需由大写、小写、数字、特殊符号组成，且不少于8位";
               //     }
               // },
               // rePassword :function(value,item){  //前面的参数用于需要校验的元素中 使用 lay-verify="rePassword"
               //     if(isEmpty(value)){
               //         return "请确认密码";
               //     }
               //     let password = $("#password").val();
               //     if(value !== password){
               //         return "两次密码不一致！";
               //     }
               // }
           });

           //新增岗位信息
           form.on('submit(add)',function(obj){
               obj.field.skills = skills.copyData;
                $.ajax({
                    url: "/qrcode/addOrUpdateSopPosition",
                    type:"PUT",
                    contentType: 'application/json',
                    data:JSON.stringify(obj.field),
                    success:function(data){
                        if (data.code == 200) {
                            layer.alert(data.message, {icon: 6}, function (iIndex) {
                                // 获得frame索引
                                var index = parent.layer.getFrameIndex(window.name);
                                //关闭当前frame
                                parent.layer.close(index);
                            });
                        } else {
                            layer.alert(data.message, {icon: 5}, function (iIndex) {
                                // 获得frame索引
                                var index = parent.layer.getFrameIndex(window.name);
                                //关闭当前frame
                                //parent.layer.close(index);
                                layer.close(iIndex);
                            });
                        }
                    }
                })
               return false;
           });

           //新增岗位信息
           form.on('submit(update)',function(obj){
               obj.field.skills = skills.copyData;
               $.ajax({
                   url: "/qrcode/addOrUpdateSopPosition",
                   type:"PUT",
                   contentType: 'application/json',
                   data:JSON.stringify(obj.field),
                   success:function(data){
                       if (data.code == 200) {
                           layer.alert(data.message, {icon: 6}, function (iIndex) {
                               // 获得frame索引
                               var index = parent.layer.getFrameIndex(window.name);
                               //关闭当前frame
                               parent.layer.close(index);
                           });
                       } else {
                           layer.alert(data.message, {icon: 5}, function (iIndex) {
                               // 获得frame索引
                               var index = parent.layer.getFrameIndex(window.name);
                               //关闭当前frame
                               //parent.layer.close(index);
                               layer.close(iIndex);
                           });
                       }
                   }
               })
               return false;
           });
       });
   });

   function strJson2Array(str){
       if(str == null || str == undefined || str ==''){
           return [];
       }
       return JSON.parse(str);
   }
</script>
</body>
</html>